﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport"
          content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) {
            document.write('<script src="js/jquery-1.9.1.min.js"><\/script>');
        }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.sort.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
    <script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
</head>
<body>
<div class="demo-container">
    <ul class="breadcrumb">
        <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span>
        </li>
        <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
        <li class="active">Showcase</li>
    </ul>
    <div class="alert">
        A showcase of what FooTable can do, including sorting, filtering and pagination!
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#demo">Demo</a></li>
        <li><a href="#setup">Setup</a></li>
        <li><a href="#docs">Docs</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="demo">
            <p>
                Search: <input id="filter" type="text"/>
                Status:
                <select class="filter-status">
                    <option></option>
                    <option value="active">Active</option>
                    <option value="disabled">Disabled</option>
                    <option value="suspended">Suspended</option>
                </select>
                <a href="#clear" class="clear-filter" title="clear filter">[clear]</a>
                <span class="row-count"></span>
            </p>
            <table class="table demo" data-filter="#filter" data-page-size="5">
                <thead>
                <tr>
                    <th data-toggle="true">
                        First Name
                    </th>
                    <th data-hide="phone">
                        Last Name
                    </th>
                    <th data-hide="phone,tablet">
                        Job Title
                    </th>
                    <th data-hide="phone,tablet" data-name="Date Of Birth">
                        DOB
                    </th>
                    <th>
                        Status
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Isidra</td>
                    <td><input value="Boudreaux" /></td>
                    <td>Traffic Court Referee</td>
                    <td data-value="78025368997">22 Jun 1972</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                </tr>
                <tr>
                    <td>Shona</td>
                    <td><input value="Woldt" /></td>
                    <td><a href="#">Airline Transport Pilot</a></td>
                    <td data-value="370961043292">3 Oct 1981</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                </tr>
                <tr>
                    <td>Granville</td>
                    <td><input value="Leonardo" /></td>
                    <td>Business Services Sales Representative</td>
                    <td data-value="-22133780420">19 Apr 1969</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>
                    </td>
                </tr>
                <tr>
                    <td>Easer</td>
                    <td><input value="Dragoo" /></td>
                    <td>Drywall Stripper</td>
                    <td data-value="250833505574">13 Dec 1977</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                </tr>
                <tr>
                    <td>Maple</td>
                    <td><input value="Halladay" /></td>
                    <td>Aviation Tactical Readiness Officer</td>
                    <td data-value="694116650726">30 Dec 1991</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>
                    </td>
                </tr>
                <tr>
                    <td>Maxine</td>
                    <td><input value="Woldt" /></td>
                    <td><a href="#">Business Services Sales Representative</a></td>
                    <td data-value="561440464855">17 Oct 1987</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lorraine</td>
                    <td><input value="Mcgaughy" /></td>
                    <td>Hemodialysis Technician</td>
                    <td data-value="437400551390">11 Nov 1983</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lizzee</td>
                    <td><input value="Goodlow" /></td>
                    <td>Technical Services Librarian</td>
                    <td data-value="-257733999319">1 Nov 1961</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>
                    </td>
                </tr>
                <tr>
                    <td>Judi</td>
                    <td><input value="Badgett" /></td>
                    <td>Electrical Lineworker</td>
                    <td data-value="362134712000">23 Jun 1981</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                </tr>
                <tr>
                    <td>Lauri</td>
                    <td><input value="Hyland" /></td>
                    <td>Blackjack Supervisor</td>
                    <td data-value="500874333932">15 Nov 1985</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>
                    </td>
                </tr>
                </tbody>
                <tfoot class="hide-if-no-paging">
                <tr>
                    <td colspan="5">
                        <div class="pagination pagination-centered"></div>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <div class="tab-pane" id="setup">
            <p>
                Check out the <a href="getting-started.htm#setup">getting started</a> demo to see how to setup FooTable.
            </p>
            <h4>Include FooTable Add-Ons</h4>

            <p>You simply need to include the add-on's javascript file to include the add-on's functionality:</p>
            <pre>&lt;script src=&quot;path_to_your_js/footable.your-add-on.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
        </div>
        <div class="tab-pane" id="docs">
            <h4>Sorting</h4>

            <p>Check out the <a href="sorting.htm">sorting demo</a> to see more documentation.</p>
            <h4>Filtering</h4>

            <p>Check out the <a href="filtering.htm">filtering demo</a> to see more documentation.</p>
            <h4>Paging</h4>

            <p>Check out the <a href="paging.htm">pagination demo</a> to see more documentation.</p>
            <h4>Bookmarkable</h4>

            <p>Adds state information to the URI hash. Check out the <a href="bookmarkable.htm">bookmarkable demo</a> to see more documentation.</p>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
		   $('table').footable({ bookmarkable: { enabled: true }}).bind({
            'footable_filtering': function (e) {
                var selected = $('.filter-status').find(':selected').text();
                if (selected && selected.length > 0) {
                    e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                    e.clear = !e.filter;
                }
            },
            'footable_filtered': function() {
                var count = $('table.demo tbody tr:not(.footable-filtered)').length;
                $('.row-count').html(count + ' rows found');
            }
        });

        $('.clear-filter').click(function (e) {
            e.preventDefault();
            $('.filter-status').val('');
            $('table.demo').trigger('footable_clear_filter');
            $('.row-count').html('');
        });

        $('.filter-status').change(function (e) {
            e.preventDefault();
            $('table.demo').data('footable-filter').filter( $('#filter').val() );
        });
    });
</script>
</body>
</html>
